<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-09 10:07:06
 * @LastEditTime: 2019-10-21 09:28:25
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="prodlist animated bounceInRight">
    <div class="header">
      <div class="header_box">
        <div @click="go_up" class="header_div">
          <img src="../../assets/histry.png" alt>
          <span class="text_1">返回</span>
        </div>
        <span class="text_2">产品</span>
        <span :class="value.length!=0?'text_3':'text_33'" @click="sure_a">确定</span>
      </div>
    </div>
    <div class="content">
        <ul class="mianbaoxie">
            <li v-for="(i,index) in mianbao_list" @click='dainji_mianbao(i,index)' :style="index!=mianbao_list.length-1?'color:#C2A48E;':'color:#A9A9A9;'" :key="index">{{i.name}}<van-icon name="arrow" /></li>
        </ul>
        <div class="tit_quanbu">
            <input @click="dianji_quanxuan" ref='xuan' class="input" type="checkbox">全选
        </div>
        <div v-if="mianbao_list[mianbao_list.length-1].leader_name!=undefined" style="height:12px;background:#FBF8F8;"></div>
        <div class="lingdao" v-if="mianbao_list[mianbao_list.length-1].leader_name!=undefined">
            <input @click.stop type="checkbox" class="input" ref='zongjian' @click="dianji_xuanze_zongjian()">
            <img src="../../assets/mine_t.png" alt="">
            <div>
                <span>{{mianbao_list[mianbao_list.length-1].leader_name}}</span>
                <span>区域总监</span>
            </div>
        </div>
        <div v-if="mianbao_list[mianbao_list.length-1].leader_name!=undefined" style="height:12px;background:#FBF8F8;"></div>
        <ul class="bumen_list">
            <li v-for="(i,index) in list" :key="index" @click="dian_bumen(i)">
                <div>
                    <input @click.stop ref='bumen' type="checkbox" class="input" @click="dianji_xuanze_bumen(i,index)">{{i.cat_name}}
                </div>
                <img :src="i.child_flag==1?require('../../assets/logo_ok.png'):require('../../assets/logo_no.png')" alt="">
            </li>
        </ul>
        <ul class="renyuan_list">
            <li v-for="(i,index) in listdata" :key="index">
                <input @click.stop ref='renyuan' type="checkbox" @click="dianji_xuanze_renyuan(i,index)" class="input">
                <!-- <img src="../../assets/mine_t.png" alt=""> -->
                <div>
                    <span>{{i.prod_name}}</span>
                </div>
            </li>
        </ul>
        <div style="height:0.41rem;"></div>
    </div>
    <div class="footer">
      <ul>
        <li v-for="(i,index) in value" :key="index">
          {{i.name}}
          <img class="footer_img" src="../../assets/clear.png" @click="dianji_shanchu(i)" alt>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {query_category_info_list,query_prod_info_list} from '../../api/api.js'
export default {
  name: "prodlist",
  data() {
    return {
      mianbao_list:[
            {
                name:'',
                parent_id:'0'
            },
      ],
      list:[],
      listdata:[],
      value:[]
    };
  },
  mounted() {
    if (sessionStorage.getItem("mlbb_xinxi") != null) {
      this.mianbao_list[0].name = JSON.parse(sessionStorage.getItem("mlbb_xinxi")).ent_name;
    }
    this.jichu()
  },
  watch: {
        value(){
            let lingdao=''
            if(this.mianbao_list[this.mianbao_list.length-1].leader_name!=undefined){
                lingdao=1
            }else{
                lingdao=0
            }
            let zong=lingdao+Number(this.list.length)+Number(this.listdata.length)
            if(this.value.length==zong&&zong!=0){
                this.$refs.xuan.checked=true
                if(this.mianbao_list[this.mianbao_list.length-1].leader_name!=undefined){
                    this.$refs.zongjian.checked=true
                }
                if(this.list.length!=0){
                    for(let i=0;i<this.list.length;i++){
                        this.$refs.bumen[i].checked=true
                    }
                }
                if(this.listdata.length!=0){
                    for(let i=0;i<this.listdata.length;i++){
                        this.$refs.renyuan[i].checked=true
                    }
                }
            }else{
                this.$refs.xuan.checked=false
            }
        }
  },
  methods: {
    //   基础文本
    jichu(){
      this.$loading.open();
      // this.$store.commit('showLoading')
      console.log(this.mianbao_list)
      query_category_info_list({
        data: {
          parent_id: this.mianbao_list[this.mianbao_list.length-1].parent_id,
          ent_id: this.$ent_id(),
          active:'1'
        }
      }).then(res => {
        this.$loading.close();
        if (res.data.code == 10193) {
          let date=JSON.parse(res.data.body.data)
          console.log(date)
          this.list=date
        //   this.$router.push("/depalist");
        } else if (res.data.code == 10194) {
          this.$toast("获取列表失败");
        }
        query_prod_info_list({data:{
            ent_id:this.$ent_id(),
            cat_id:this.mianbao_list[this.mianbao_list.length-1].parent_id,
            active:'2'
        }}).then(ras=>{
            if(ras.data.code==10139){
                let listdata=JSON.parse(ras.data.body.data)
                console.log(99999,listdata)
                this.listdata=listdata
            }else if(ras.data.code==10140){
            }
        })
      });
    },
    // 单行点击部门
    dian_bumen(i){
        console.log(i)
        if(i.child_flag==1){
            this.mianbao_list.push({
                name:i.cat_name,
                parent_id:i.cat_id
            })
            this.jichu()
            setTimeout(() => {
                this.shandiao_duigou()
            }, 0)
        }else{
            this.$toast('该部门没有子部门')
        }
    },
    // 点击面包屑还原下面信息
    dainji_mianbao(i,index){
        if(index!=this.mianbao_list.length-1){
            console.log(i)
            query_category_info_list({data:{
                ent_id:this.$ent_id(),
                parent_id:i.parent_id,
                active:'1'
            }}).then(res=>{
                if(res.data.code==10193){
                    let date=JSON.parse(res.data.body.data)
                    console.log(date)
                    this.list=date
                    for(let a=0;a<this.mianbao_list.length;a++){
                        if(i.name==this.mianbao_list[a].name){
                            this.mianbao_list.splice(a+1,this.mianbao_list.length)
                        }
                    }
                }else if(res.data.code==10194){
                }
            })
            query_prod_info_list({data:{
                ent_id:this.$ent_id(),
                cat_id:i.parent_id,
                active:'1'
            }}).then(ras=>{
                if(ras.data.code==10139){
                    let listdata=JSON.parse(ras.data.body.data)
                    console.log(99999,listdata)
                    this.listdata=listdata
                }else if(ras.data.code==10140){
                }
            })
            setTimeout(() => {
                this.shandiao_duigou()
            }, 0)
        }
    },
    //   确定按钮
    sure_a() {
        if(this.value.length!=0){
            let one_list=[]
            let three_list=[]
            for(let i=0;i<this.value.length;i++){
                // one_list.push()
                if(this.value[i].cha==1){
                    three_list.push(this.value[i])
                }else if(this.value[i].cha==2){
                    one_list.push(this.value[i])
                }
            }
            sessionStorage.setItem("xuan_two", JSON.stringify(one_list));
            sessionStorage.setItem("xuan_four", JSON.stringify(three_list));
            this.$router.push("/sale");
        }else{
            this.$toast('请选择后再点确定')
        }
    },
    go_up(){
      this.$router.go(-1);
    },
    // 点击全选
    dianji_quanxuan(){
        console.log(this.$refs)
        // checked
        // zongjian,bumen,renyuan,xuan
        if(this.$refs.xuan.checked){
            this.value=[]
            if(this.mianbao_list[this.mianbao_list.length-1].leader_name!=undefined){
                this.value.push({
                    name:this.mianbao_list[this.mianbao_list.length-1].leader_name,
                    id:this.mianbao_list[this.mianbao_list.length-1].dept_leader_id,
                    cha:'1'
                })
                this.$refs.zongjian.checked=true
            }
            if(this.list.length!=0){
                for(let i=0;i<this.list.length;i++){
                    this.value.push({
                        name:this.list[i].cat_name,
                        id:this.list[i].cat_id,
                        cha:'1'
                    })
                    this.$refs.bumen[i].checked=true
                }
            }
            // 
            if(this.listdata.length!=0){
                for(let i=0;i<this.listdata.length;i++){
                    this.value.push({
                        name:this.listdata[i].prod_name,
                        id:this.listdata[i].prod_id,
                        cha:'2'
                    })
                    this.$refs.renyuan[i].checked=true
                }
            }
            console.log(this.value)
        }else{
            this.value=[]
            if(this.mianbao_list[this.mianbao_list.length-1].leader_name!=undefined){
                this.$refs.zongjian.checked=false
            }
            if(this.list.length!=0){
                for(let i=0;i<this.list.length;i++){
                    this.$refs.bumen[i].checked=false
                }
            }
            if(this.listdata.length!=0){
                for(let i=0;i<this.listdata.length;i++){
                    this.$refs.renyuan[i].checked=false
                }
            }
        }
    },
    // 点击移除某个
    dianji_shanchu(i){
        console.log(i)
        for(let a=0;a<this.value.length;a++){
            if(i.name==this.value[a].name){
                this.value.splice(a,1)
            }
            if(this.$refs.zongjian!=undefined&&i.name==this.$refs.zongjian.parentNode.children[2].children[0].innerText){
                this.$refs.zongjian.checked=false
            }
            if(this.$refs.renyuan!=undefined){
                for(let b=0;b<this.$refs.renyuan.length;b++){
                    if(i.name==this.$refs.renyuan[b].parentNode.innerText){
                        this.$refs.renyuan[b].checked=false
                    }
                }
            }
            if(this.$refs.bumen!=undefined){
                for(let b=0;b<this.$refs.bumen.length;b++){
                    if(i.name==this.$refs.bumen[b].parentNode.innerText){
                        this.$refs.bumen[b].checked=false
                    }
                }
            }
        }
    },
    // 选择主管
    dianji_xuanze_zongjian(){
        if(this.$refs.zongjian.checked){
            this.value.push({
                name:this.mianbao_list[this.mianbao_list.length-1].leader_name,
                id:this.mianbao_list[this.mianbao_list.length-1].dept_leader_id,
                cha:'1'
            })
        }else{
            for(let i=0;i<this.value.length;i++){
                if(this.value[i].name==this.$refs.zongjian.parentNode.children[2].children[0].innerText){
                    this.value.splice(i,1)
                }
            }
        }
    },
    // 点击选择部门
    dianji_xuanze_bumen(i,index){
        console.log(this.$refs)
        if(this.$refs.bumen[index].checked){
            this.value.push({
                name:i.cat_name,
                id:i.cat_id,
                cha:'1'
            })
        }else{
            for(let a=0;a<this.value.length;a++){
                if(this.value[a].name==i.cat_name){
                    this.value.splice(a,1)
                }
            }
        }
    },
    // 点击选择人员
    dianji_xuanze_renyuan(i,index){
        if(this.$refs.renyuan[index].checked){
            this.value.push({
                name:i.prod_name,
                id:i.prod_id,
                cha:'2'
            })
        }else{
            for(let a=0;a<this.value.length;a++){
                if(this.value[a].name==i.prod_name){
                    this.value.splice(a,1)
                }
            }
        }
    },
    shandiao_duigou(){
        this.value=[]
        this.$refs.xuan.checked=false
        if(this.mianbao_list[this.mianbao_list.length-1].leader_name!=undefined){
            this.$refs.zongjian.checked=false
        }
        if(this.list.length!=0){
            for(let i=0;i<this.list.length;i++){
                this.$refs.bumen[i].checked=false
            }
        }
        if(this.listdata.length!=0){
            for(let i=0;i<this.listdata.length;i++){
                this.$refs.renyuan[i].checked=false
            }
        }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.input[type="checkbox"] {
  width: 0.14rem;
  height: 0.14rem;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  line-height: 18px;
  position: relative;
}
.input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  width: 100%;
  height: 100%;
  border: 1px solid #d9d9d9;
}
.input[type="checkbox"]:checked::before {
  content: "\2713";
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border: 1px solid #26a2ff;
  color: #26a2ff;
  font-size: 0.14rem;
  font-weight: bold;
}
.prodlist {
  height: 100vh;
  position: relative;
  .header {
    height: 1.65rem;
    width: 100%;
    background-image: url("../../assets/background_sale.png");
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    .header_box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 0.42rem;
      padding: 0 0.16rem;
      padding-top: 0.17rem;
      .header_div {
        display: flex;
        align-items: center;
        img {
          height: 0.16rem;
          width: 0.08rem;
          margin-right:0.08rem;
        }
        .text_1 {
          font-size: 0.14rem;
          color: #888;
          font-weight: 500;
        }
      }
      .text_2 {
        font-size: 0.18rem;
        color: #1a2533;
        font-weight: 500;
        margin-right: 0.17rem;
      }
      .text_3 {
        font-size: 0.14rem;
        color: #e82716;
        font-weight: 500;
      }
      .text_33 {
        font-size: 0.14rem;
        color: #888;
        font-weight: 500;
      }
    }
  }
  .content {
    position: absolute;
    top: 0.6rem;
    width: 100%;
    height: 5.8rem;
    overflow-y: scroll;
    background-color: #fff;
    .mianbaoxie{
        padding: 0.12rem 0.15rem;
        display: flex;
        align-items: center;
        li{
            font-size: 14px;
            color:#A9A9A9;
            display: flex;
            align-items: center;
        }
    }
    .tit_quanbu{
        display: flex;
        align-items: center;
        font-size: 0.14rem;
        color:#82B0FD;
        padding: 0.09rem 0;
        .input{
            margin-right: 14px;
            margin-left: 15px;
        }
    }
    .lingdao{
        height:0.56rem;
        display: flex;
        align-items: center;
        padding: 0 0.15rem;
        .input{
            margin-right:0.14rem;
        }
        img{
            height:0.24rem;
            width:0.24rem;
            border-radius: 50%;
            margin-right: 0.1rem;
        }
        div{
            span{
                display: block;
                &:nth-child(1){
                    font-size: 0.14rem;
                    color:#1A2533;
                }
                &:nth-child(2){
                    font-size: 0.1rem;
                    color:#A9A9A9;
                }
            }
        }
    }
    .bumen_list{
        padding: 0 0.15rem;
        border-top:0.01rem solid #EEEEEE;
        border-bottom: 0.01rem solid #EEEEEE;
        li{
            display: flex;
            align-items: center;
            justify-content: space-between;
            height:0.44rem;
            border-bottom:0.01rem solid #EEEEEE;
            div{
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 0.14rem;
                color:#1A2533;
                .input{
                    margin-right: 0.14rem;
                }
            }
            img{
                height:0.2rem;
                width:0.2rem;
            }
        }
    }
    .renyuan_list{
        li{
            height:0.56rem;
            display: flex;
            align-items: center;
            padding: 0 0.15rem;
            border-bottom:0.01rem solid #EEEEEE;
            .input{
                margin-right:0.14rem;
            }
            img{
                height:0.24rem;
                width:0.24rem;
                border-radius: 50%;
                margin-right: 0.1rem;
            }
            div{
                span{
                    display: block;
                    &:nth-child(1){
                        font-size: 0.14rem;
                        color:#1A2533;
                    }
                    &:nth-child(2){
                        font-size: 0.1rem;
                        color:#A9A9A9;
                    }
                }
                
            }
        }
    }
  }
  .footer {
    position: absolute;
    bottom: 0;
    height: 0.4rem;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #fbf8f8;
    overflow-x: scroll;
    ul {
      display: -webkit-box;
      li {
        padding: 0.03rem 0.11rem;
        font-size: 0.12rem;
        color: #8c8c8c;
        background: rgba(205, 226, 250, 0.38);
        border-radius: 0.03rem;
        position: relative;
        margin: 0 0.1rem;
        .footer_img {
          height: 0.13rem;
          width: 0.13rem;
          position: absolute;
          right: -0.06rem;
          top: -0.03rem;
        }
      }
    }
  }
}
</style>
